<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/*标签*/
.tagSelect{
    display: flex;
    height: 24px;
    padding: 4px 0;
    line-height: 24px;
}
.tagItemBox{
    display: flex;
}
.tagItem{
    display: flex;
    margin-right: 10px;
    border: 1px solid #0fa6d0;
    border-radius: 3px;
}
.tagName{
    float: left;
    overflow: hidden;
    padding: 0 5px;
    min-width: 10px;
    display: block;
    max-width: 100px;
    white-space: nowrap;
    outline: none;
}
.tagDelBtn{
    float: left;
    padding: 0 6px;
    height: 22px;
    color: #0fa6d0;
    cursor: pointer;
    background: none;
}
.addTagBtn{
    padding: 0 5px;
    border: 1px solid #0fa6d052;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}
.addTagBtn img{
    width: 16px;
    height: 16px;
}        
    </style>
</head>
<body>
    <div class="tagBox">
        默认已有标签。ds,不会重复添加
        <div class="tagText">文章标签：</div>
        <div id="tagSelect" class="tagSelect">
<!--                    <input type="hidden" class="tagInput">-->
            <div class="tagItemBox">
<!--                        <div class="tagItem">-->
<!--                            <span class="tagName" contenteditable="true"></span>-->
<!--                            <button class="tagDelBtn">X</button>-->
<!--                        </div>-->
            </div>
            <button class="addTagBtn"><img src="img/addTagBtnImg.png">添加文章标签</button>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var tagSelect = {
  tagSelectId: [],
  tagSelectName: []
};
var tagNameFlag = false;//标签回车键
//标签回车键
$(document).bind('keyup','.tagItem .tagName', function(event) {
  if (event.keyCode == "13" && tagNameFlag) {
    //回车执行查询
    // $('#search_button').click();
    var str = $(event.target).html()
    $(event.target).html('');
    $(event.target).html(str.split('<div>')[0]);
    console.log($(event.target).html().split('<div>')[0])
    // getC(event.target)
    $('.addTagBtn').click();
  }
});
    //点击添加标签
$('.addTagBtn').on('click', function () {
  var tagItemNum = $('#tagSelect .tagItem').length;
  if (tagItemNum < 6) {
    tagNameFlag = true;
    var str = '<div class="tagItem">\n' +
      '                        <span class="tagName" contenteditable="true"></span>\n' +
      '                        <button class="tagDelBtn">X</button>\n' +
      '                    </div>'
    $('#tagSelect .tagItemBox').append(str);
    getC($('.tagItemBox .tagName')[tagItemNum])
  } else {
    tagNameFlag = false;
    alert('最多只能添加6个标签！')
  }
});
//标签，失去焦点事件
$(document).on('blur', '.tagName', function () {
  if ($(this).html().length == 0) {
    $(this).parent('.tagItem').remove();
  } else {
    if (tagSelect.tagSelectName.indexOf($(this).html()) == -1) {
      $(this).attr('contenteditable', false);
      getTagsNames($(this).html())
    } else {
        // 已经添加标签，不会重复添加
      $(this).parent('.tagItem').remove();
    }
  }
})
//标签回车键
$(document).bind('keyup','.tagItem .tagName', function(event) {
  if (event.keyCode == "13" && tagNameFlag) {
    //回车执行查询
    // $('#search_button').click();
    var str = $(event.target).html()
    $(event.target).html('');
    $(event.target).html(str.split('<div>')[0]);
    console.log($(event.target).html().split('<div>')[0])
    // getC(event.target)
    $('.addTagBtn').click();
  }
});
//获取焦点光标getC($('.tagName'))
function getC(el) {
  // el = el[0]; // jquery 对象转dom对象
  el.focus();
  var range = document.createRange();
  range.selectNodeContents(el);
  range.collapse(false);
  var sel = window.getSelection();
//判断光标位置，如不需要可删除
  if (sel.anchorOffset != 0) {
    return;
  }
  ;
  sel.removeAllRanges();
  sel.addRange(range);
  // $(document).keyup(function(event){
  //   if(event.keyCode ==13){
  //     $(event.target).html().replace(/[\r\n]/g,"")
  //     if($(event.target).html().length==0){
  //       $(this).parent('.tagItem').remove();
  //     }else {
  //       $(event.target).attr('contenteditable', false);
  //     }
  //   }
  // });
}
//获取文章标签
function getTagsNames(tagName) {
  var data = {
    "name": tagName,
  }
//   createTagListApi(data).then(function (dataList) {
//     $('.tagItemBox .tagItem:last-child').attr('indexid', dataList.content.id)
//     addArrData(tagSelect.tagSelectId, dataList.content.id.toString())
//     addArrData(tagSelect.tagSelectName, dataList.content.name)
//     console.log('addArrData', tagSelect.tagSelectId, dataList.content)
//   })
var dataList = { content:{id: 77,name: "ds"}}
    $('.tagItemBox .tagItem:last-child').attr('indexid', dataList.content.id)
    addArrData(tagSelect.tagSelectId, dataList.content.id.toString())
    addArrData(tagSelect.tagSelectName, dataList.content.name)
    console.log('addArrData', tagSelect.tagSelectId, dataList.content)
};
//数组中添加不重复元素
var addArrData = function (arr, val) {
  if ($.inArray(val, arr) < 0) {
    arr.push(val);
    // return true
  } else {
    // return false
  }
};
//移除数组中指定元素
function arrRemove(arr, val) {
  var index = arr.indexOf(val);
  if (index > -1) {
    arr.splice(index, 1);
  }
};
//删除文章标签
$(document).on('click', '.tagDelBtn', function () {
  arrRemove(tagSelect.tagSelectId, $(this).parent('.tagItem').attr('indexid'))
  arrRemove(tagSelect.tagSelectName, $(this).parent('.tagItem').find('.tagName').html())
  $(this).parent('.tagItem').remove();
});
</script>    
</body>
</html>